
<!DOCTYPE html>
<html style="width: 100%;height: 100%;">
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_webPrinting_landUse"></title>
    <script type="text/javascript" include="bootstrap,jquery" src="./js/include-web.js"></script>
    <script type="text/javascript" src="./js/include-ol.js"></script>
<!--    <link rel="stylesheet" href="./css/ol.css" type="text/css">-->
<!--    <link type="text/css" rel="stylesheet" href="./css/bootstrap.min.css">-->
<!--    <script src="./js/jquery.min.3.2.1.js"></script>-->
    <style>
        .sidebar-config-wrap {
            position: absolute;
            top: 0;
            left: 0;
            height: 100vh;
            width: 360px;
            padding: 20px;
            background: #2c2c2c;
        }

        .sidebar-config-wrap .panel-group .panel {
            border-color: transparent;
            background: transparent;
            color: rgba(255, 255, 255, 0.6);
        }

        .sidebar-config-wrap .panel .panel-heading {
            background: #383838;
            color: rgba(255, 255, 255, 0.85);
            border-color: #383838;
            position: relative;
        }

        .sidebar-config-wrap .panel .panel-heading::before {
            content: "";
            height: 50%;
            width: 2px;
            background: #3394dc;
            position: absolute;
            top: 25%;
            left: 0;
            display: block;
        }

        .form-group {
            overflow: hidden;
        }

        .sidebar-config-wrap .form-control,
        .sidebar-config-wrap .btn-group {
            width: 70%;
            float: right;
        }

        .sidebar-config-wrap .form-group label {
            margin-bottom: 0;
            line-height: 34px;
        }

        .sidebar-config-wrap .btn-group {
            display: block;
            margin-bottom: 10px;

        }

        .sidebar-config-wrap .btn-group button {
            width: 50%;
            outline: none;
        }

        .sidebar-config-wrap .btn-group button:focus {
            outline: none;
        }

        .sidebar-config-wrap .panel-title a {
            width: 100%;
            display: block;
            text-decoration: none !important;
            overflow: hidden;
        }

        .sidebar-config-wrap .panel-title a span.glyphicon  {
            float: right;
        }

        .sidebar-config-wrap .panel-title a[aria-expanded="true"] .glyphicon-chevron-down {
            display: none;
        }

        .sidebar-config-wrap .panel-title a[aria-expanded="false"] .glyphicon-chevron-up {
            display: none;
        }

        .sidebar-config-wrap .submit-btn-wrap {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80px;
            line-height: 80px;
            border-top: 2px solid #323232;
            text-align: center;
        }

        .sidebar-config-wrap #printBtn,
        .sidebar-config-wrap .progress {
            width: 80%;
        }

        .sidebar-config-wrap .progress {
            margin: 30px auto 0;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height: 100%">
<div id="map" style="width: 100%;height:100%"></div>

<form id="printForm" class="sidebar-config-wrap" role="form">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">基本信息
                        <span data-i18n="resources.text_baseInfo"></span>
                        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="templateName" data-i18n="resources.text_layoutTemplates">布局模板</label>
                        <select class="form-control" id="templateName">
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="title" data-i18n="resources.text_title">标题</label>
                        <input type="text" class="form-control" id="title" data-i18n="[value]resources.title_mvtVectorLayer_mapboxStyle_landuse" />
                    </div>
                    <div class="form-group">
                        <label for="subTitle" data-i18n="resources.text_subTitle">副标题</label>
                        <input type="text" class="form-control" id="subTitle" />
                    </div>
                    <div class="form-group">
                        <label for="copyright" data-i18n="resources.text_copyRightInfo">版权信息</label>
                        <input type="text" class="form-control" id="copyright" />
                    </div>
                    <div class="form-group">
                        <label for="author" data-i18n="resources.text_author">作者</label>
                        <input type="text" class="form-control" id="author" value="北京超图软件股份有限公司" />
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">附图
                        <span data-i18n="resources.text_littleMap"></span>
                        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="scale" data-i18n="resources.text_scale">比例尺</label>
                        <input type="text" class="form-control" id="scale" value="0" />
                    </div>
                    <div class="form-group">
                        <label for="center" data-i18n="resources.text_center">中心点</label>
                        <input type="text" class="form-control" id="center" data-i18n="[title]resources.text_centerTip" />
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="scaleOptions">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">比例尺
                        <span data-i18n="resources.text_scale"></span>
                        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="scaleOptions">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="scaleText" data-i18n="resources.text_scaleText">比例尺文本</label>
                        <input type="text" class="form-control" id="scaleText" />
                    </div>
                    <div class="form-group">
                        <label for="type" data-i18n="resources.text_style">样式</label>
                        <select class="form-control" id="type">
                            <option value="LINE">line</option>
                            <option value="BAR" selected>bar</option>
                            <option value="BAR_SUB">bar_sub</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="intervals" data-i18n="resources.text_intervals">段数</label>
                        <input type="text" class="form-control" id="intervals" />
                    </div>
                    <div class="form-group">
                        <label for="unit" data-i18n="resources.text_unit">单位</label>
                        <select class="form-control" id="unit">
                            <option value="METER" data-i18n="resources.option_meterUnit"></option>
                            <option value="FOOT" data-i18n="resources.option_mileUnit"></option>
                            <option value="DEGREES" data-i18n="resources.option_degreeUnit"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="exportOptions">
                <h5 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">导出选项
                        <span data-i18n="resources.text_exportOptions"></span>
                        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                    </a>
                </h5>
            </div>
            <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="exportOptions">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="format" data-i18n="resources.text_format">格式</label>
                        <select class="form-control" id="format">
                            <option value="PDF">PDF</option>
                            <option value="PNG">PNG</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="dpi">DPI</label>
                        <input type="text" class="form-control" id="dpi" value="96" />
                    </div>
                    <div class="form-group">
                        <label for="exportScale" data-i18n="resources.text_scale">比例尺</label>
                        <input type="text" class="form-control" id="exportScale" value="0" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="submit-btn-wrap">
        <button type="submit" class="btn btn-primary" id="printBtn" data-i18n="resources.text_print">打印</button>
        <div class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                printing...
            </div>
        </div>
    </div>
</form>
<script type="text/javascript">
    console.log("输出resource",window.resources)
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var webMap = new ol.supermap.WebMap(1887887232, {
        target: 'map',
        successCallback: function (map) {
            $('#center').val(map.getView().getCenter().join(','));
            var res = map.getView().getResolution();
            var scale = SuperMap.Util.getScaleFromResolutionDpi(res, 96, map.getView().getProjection().getUnits());
            $('#scale').val(scale * 2);
            $('#exportScale').val(scale);
        }
    });
    var webPrintingJobService = new ol.supermap.WebPrintingJobService(host + '/iserver/services/webprinting/rest/webprinting/v1', {
        withCredentials: window.isLocal
    });
    webPrintingJobService.getLayoutTemplates(function (e) {
        e.result.forEach(function(item){
            $('#templateName').append('<option value='+item.templateName+'>'+item.templateName+'</option}');
        });
    });

    $('.progress').hide();
    $('#printForm').on('submit', printMap);
    function printMap(e) {
        e.preventDefault();
        $('#printBtn').hide();
        $('.progress').show();
        var params = new SuperMap.WebPrintingJobParameters({
            content: new SuperMap.WebPrintingJobContent({
                type: "WEBMAP",
                url: "https://www.supermapol.com/web/maps/1887887232/map.json"
            }),
            layoutOptions: new SuperMap.WebPrintingJobLayoutOptions({
                templateName: $('#templateName').val(),
                title: $('#title').val(),
                subTitle: $('#subTitle').val(),
                author: $('#author').val(),
                copyright: $('#copyright').val(),
                scaleBarOptions: new SuperMap.WebPrintingJobScaleBarOptions({
                    scaleText: $('#scaleText').val(),
                    type: $('#type').val(),
                    intervals: $('#intervals').val(),
                    unit: $('#unit').val(),
                }),
                littleMapOptions: new SuperMap.WebPrintingJobLittleMapOptions({
                    scale: +$('#scale').val() || 0,
                    center: { x: $('#center').val().split(',')[0], y: $('#center').val().split(',')[1] },
                    layerNames: webMap.layers && webMap.layers.map(function(item) {return item.name})
                }),
                legendOptions: new SuperMap.WebPrintingJobLegendOptions({
                    picAsBase64: ""
                })
            }),
            exportOptions: new SuperMap.WebPrintingJobExportOptions({
                format: $('#format').val(),
                dpi: +$('#dpi').val(),
                scale: +$('#exportScale').val()
            })
        });
        filterEmptyData(params);
        webPrintingJobService.createWebPrintingJob(params, function (e) {
            if (e.result && e.result[0] && e.result[0].path) {
                webPrintingJobService.getPrintingJob(e.result[0].resourceConfigID, function ( res ) {
                    if (res.result && res.result.status === 'FINISHED') {
                        let link = document.createElement('a');
                        link.href = res.result.result.downloadUrl;
                        link.download = 'supermap-webprinting-report.pdf';
                        link.target = '_blank';
                        link.click();
                        // 释放内存
                        window.URL.revokeObjectURL(link.href);
                        $('#printBtn').show();
                        $('.progress').hide();
                    } else {
                        alert('打印失败');
                        $('#printBtn').show();
                        $('.progress').hide();
                    }
                });
            } else {
                alert('打印失败');
                $('#printBtn').show();
                $('.progress').hide();
            }
        });
    }
    function filterEmptyData(params) {
        for (let key in params) {
            if (params[key] === undefined) {
                delete params[key];
            } else if (typeof params[key] === 'object') {
                filterEmptyData(params[key]);
                if (JSON.stringify(params[key]) === '{}') {
                    delete params[key];
                }
            }
        }
    }
    $('#legendBtnGroup').click(function (e) {
        $(this).children(".active").removeClass('active');
        $(e.target).addClass('active');
        $(this).attr('aria-active', e.target.getAttribute('id'));
    });
</script>
</body>
